<template>
  <div>
    <div :style="{ marginTop: headerTop }">
      <van-tabs
        style="position: relative"
        @click-tab="onClickTab"
        v-model:active="active"
      >
        <div
          style="width: 100%; height: 100%; display: flex; align-items: center"
        >
          <div
            style="
              width: 30px;
              height: 48px;
              background: #fff;
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              right: 0;
              top: 0;
            "
          >
            <van-icon @click="sx" size="22" name="filter-o" />
          </div>
        </div>
        <van-tab title="待审核">
          <div
            @scroll="handleScroll"
            ref="refList"
            class="lists"
            :style="{
              height: sheight,
            }"
          >
            <Card @yes="getYes" @no="getNo" :list="listInfo.list"></Card>
            <van-empty
              v-if="listInfo.list.length == 0"
              image="search"
              description="暂无访客信息"
            >
              <van-button
                @click="getDataList(true)"
                round
                type="primary"
                class="bottom-button"
                >刷新</van-button
              >
            </van-empty>
          </div>
        </van-tab>
        <van-tab title="已审核">
          <div
            @scroll="handleScroll"
            ref="refList"
            class="lists"
            :style="{
              height: sheight,
            }"
          >
            <Card @yes="getYes" @no="getNo" :list="listInfo.list"></Card>
            <van-empty
              v-if="listInfo.list.length == 0"
              image="search"
              description="暂无访客信息"
            >
              <van-button
                @click="getDataList(true)"
                round
                type="primary"
                class="bottom-button"
                >刷新</van-button
              >
            </van-empty>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
  <van-popup
    v-model:show="show"
    position="right"
    style="height: 100%; padding-top: 50%; box-sizing: border-box; width: 70%"
  >
    <van-field
      label-width="120"
      @click="handlePopShow(1)"
      v-model="params.year"
      name="年度"
      label="年度"
      is-link
      readonly
    />
    <van-field
      label-width="120"
      @click="handlePopShow(2)"
      v-model="params.companyName"
      name="单位"
      label="单位"
      is-link
      readonly
    />
    <van-field
      label-width="120"
      @click="handlePopShow(3)"
      v-model="params.deptName"
      name="部门"
      label="部门"
      readonly
      :disabled="!params.companyName"
      is-link
    />
    <van-field
      label-width="120"
      @click="handlePopShow(4)"
      v-model="params.typeName"
      name="问题类型"
      label="问题类型"
      readonly
      is-link
    />
    <van-field
      label-width="120"
      @click="handlePopShow(5)"
      v-model="params.levelName"
      name="问题级别"
      label="问题级别"
      readonly
      is-link
    />
    <div
      style="
        width: 100%;
        bottom: 20px;
        margin-top: 40px;
        display: flex;
        padding: 0 10px;
        justify-content: center;
        box-sizing: border-box;
      "
    >
      <van-button block size="small" @click="query" type="primary"
        >确定</van-button
      >
    </div></van-popup
  >
  <timePicerCom
    @confirm="tconfirm"
    @close="tclose"
    :is-show="timeShowPop"
    :columns-type="['year']"
  />
  <PickerCom
    :title="title"
    :is-show="showPop"
    :picker-list="columns"
    @confirm="confirm"
    @close="close"
  ></PickerCom>
</template>
暂无
<script setup lang="ts">
import PickerCom from "@/components/pickerCom.vue";
import { ref, getCurrentInstance, reactive, onMounted } from "vue";
import { showToast } from "vant";
import { useSelfHeight } from "@/composition/index";
import Card from "@/components/card.vue";
// import storage from "@/utils/storage";
import { getmyguestpagelist, approveguestform } from "@/api/others";
const sheight = ref<string>("0px");
const show = ref(false);
const headerTop = ref<number>(0);
const title = ref<string>("");
const columns = ref<any>([]);
const timeShowPop = ref<boolean>(false);
const showPop = ref<boolean>(false);
const ctype = ref<number>(-1);
const active = ref(0);
const chosoeType = ref(0);

const getYes = ({ res, item }: { res: any; item: any }) => {
  try {
    approveguestform({
      id: item.Id,
      isApprove: res,
    }).then((res) => {
      showToast(res.msg);
      getDataList();
    });
  } catch (error: any) {
    showToast(error.msg);
  }
};

const getNo = ({ res, item }: { res: any; item: any }) => {
  try {
    approveguestform({
      id: item.Id,
      isApprove: res,
    }).then((res) => {
      showToast(res.msg);
      getDataList();
    });
  } catch (error: any) {
    showToast(error.msg);
  }
};
const onClickTab = (e: any) => {
  chosoeType.value = e.name;
  if (chosoeType.value == 0) {
    params.value.Status = 1;
  } else if (chosoeType.value == 1) {
    params.value.Status = 2;
  }
  listInfo.cpage = 1;
  listInfo.list = [];
  getDataList();
};
const params = ref({
  Status: 1,
}) as any;
const listInfo = reactive({
  cpage: 1,
  total: 0,
  lock: false,
  list: [],
}) as any;
// const id = ref<string>("");
// const showShare = ref<boolean>(false);
const { proxy } = getCurrentInstance() as any;
// const chooseItem = ref<any>({});
const query = () => {
  listInfo.cpage = 1;
  listInfo.list = [];
  if (chosoeType.value == 2) {
    params.value.listFlag = 0;
  } else if (chosoeType.value == 0) {
    params.value.listFlag = 1;
  } else if (chosoeType.value == 1) {
    params.value.listFlag = 2;
  }
  getDataList();
  reset();
  proxy.$refs.vdmenue.close();
};

const confirm = (e: any) => {
  console.log(e, ctype.value);
};
const close = () => {
  showPop.value = false;
};
const tconfirm = (e: any) => {
  params.value.year = e;
  tclose();
};

const reset = () => {
  params.value = {
    year: "",
    companyId: "",
    companyName: "",
    deptId: "",
    deptName: "",
    type: "",
    typeName: "",
    level: "",
    levelName: "",
    status: "",
    statusName: "",
    listFlag: params.value.listFlag,
  };
};

const handlePopShow = (type: number) => {
  console.log(type);
};

const tclose = () => {
  timeShowPop.value = false;
};

const sx = () => {
  show.value = true;
};

/*
  1. 深灰色：#333333
  3. 石板蓝色：#6D7B8D
  4. 褐色：#654321
  5. 藏青色：#003366
  6. 紫色：#800080
  7. 酒红色：#800000
  8. 深绿色：#006400
  10. 深蓝色：#00008B
  */
// const statusTocolor = {
//   办结: "#6D7B8D",
//   初判: "#333333",
//   核实: "#333333",
//   措施制定: "#003366",
//   措施审核: "#003366",
//   措施落实: "#006400",
//   整改验证: "#006400",
//   反馈: "654321",
//   事发单位管理部门负责人审核: "#800000",
//   事发单位分管领导审批: "#800000",
//   公司安全应急部处室负责人审批: "#800080",
//   公司安全应急部部门负责人审批: "#800080",
//   公司负责人审批: "#800080",
//   公司安全应急部处室信息传达: "#654321",
//   公司董事会办公室审阅: "#654321",
// } as any;
const handleScroll = () => {
  const container = proxy.$refs.refList; // 获取容器元素
  if (
    container.clientHeight + container.scrollTop >=
    container.scrollHeight - 10
  ) {
    getDataList();
  }
};

// const opItem = (item: any) => {
//   console.log(item, "item");
//   showShare.value = true;
//   chooseItem.value = item;
//   id.value = item.id;
//   if (chosoeType.value == 0) {
//     if (item.status == "1700-1") {
//       options.value = [
//         { name: "删除", icon: "contact", id: 1, item, isShow: true },
//         { name: "修改", icon: "contact", id: 2, item, isShow: true },
//       ];
//     } else {
//       options.value = [
//         { name: "删除", icon: "contact", id: 1, item, isShow: true },
//         { name: "详情", icon: "contact", id: 0, item, isShow: true },
//       ];
//     }
//   } else if (chosoeType.value == 1) {
//     if (item.status == "1700-99") {
//       options.value = [
//         { name: "详情", icon: "contact", item, id: 0, isShow: true },
//       ];
//     } else {
//       if (item.status == "1700-1") {
//         options.value = [
//           {
//             name: item.statusName,
//             icon: "contact",
//             item,
//             id: item.status,
//             isShow: true,
//           },
//         ];
//       } else {
//         options.value = [
//           {
//             name: item.statusName,
//             icon: "contact",
//             item,
//             id: item.status,
//             isShow: true,
//           },
//           { name: "详情", icon: "contact", item, id: 0, isShow: true },
//         ];
//       }
//     }
//   } else if (chosoeType.value == 2) {
//     options.value = [
//       { name: "详情", icon: "contact", item, id: 0, isShow: true },
//     ];
//   }
//   options.value = options.value.filter((e: any) => e.isShow);
// };
const getDataList = async (isRresh?: boolean) => {
  if (isRresh) {
    listInfo.cpage = 1;
    listInfo.list = [];
    await getmyguestpagelist({
      page: listInfo.cpage,
      pageSize: 10,
      model: params.value,
    }).then((res: any) => {
      if (res.code == 100) {
        listInfo.list = [...listInfo.list, ...res.data.Data];
        listInfo.total = res.data.TotalItemCount;
        showToast("数据已更新");
      }
    });
  } else {
    if (!listInfo.lock) {
      listInfo.lock = true;
      return new Promise<any>(async (resolve, reject) => {
        await getmyguestpagelist({
          page: listInfo.cpage,
          pageSize: 10,
          model: params.value,
        })
          .then((res: any) => {
            if (res.code === 100) {
              if (listInfo.list.length >= res.data.TotalItemCount) {
                reject("err");
                return showToast("没有更多了");
              }
              resolve(res);
              listInfo.list = [...listInfo.list, ...res.data.Data];
              listInfo.cpage++;
              listInfo.total = res.data.TotalItemCount;
            }
          })
          .catch((err: any) => {
            reject(err);
            console.log(err);
          })
          .finally(() => {
            listInfo.lock = false;
          });
      });
    } else {
      return;
    }
  }
};
const selfHeight = async () => {
  let res = await useSelfHeight(true);
  headerTop.value = res.headerTop;
  sheight.value = res.sheight;
};
onMounted(() => {
  selfHeight();
});
const init = () => {
  getDataList();
};
init();

// const options = ref<any[]>([]);
// const onSelect = (option: any) => {
//   const statusTopath = {
//     "1700-1": "/addyhzl",
//     "1700-2": "/csyhzl",
//     "1700-3": "/shyhzl",
//     "1700-4": "/lsyhzl",
//     "1700-5": "/yzyhzl",
//   } as any;
//   switch (option.id) {
//     case 0:
//       //详情
//       router.push({
//         path: "/detailyhzl",
//         query: { id: option.item.id },
//       });
//       break;
//     case 1:
//       //删除
//       break;
//     case 2:
//       //修改登记信息
//       router.push({
//         path: "/addyhzl",
//         query: { id: option.item.id },
//       });
//       break;
//     case "1700-1":
//       //初判
//       router.push({
//         path: statusTopath[option.id],
//       });
//       // router.push(statusTopath[option.id]);
//       break;
//     case "1700-2":
//       //初判
//       router.push({
//         path: statusTopath[option.id],
//         query: { id: option.item.id },
//       });
//       // router.push(statusTopath[option.id]);
//       break;
//     case "1700-3":
//       //初判
//       router.push({
//         path: statusTopath[option.id],
//         query: { id: option.item.id },
//       });
//       // router.push(statusTopath[option.id]);
//       break;
//     case "1700-4":
//       //初判
//       router.push({
//         path: statusTopath[option.id],
//         query: { id: option.item.id },
//       });
//       // router.push(statusTopath[option.id]);
//       break;
//     case "1700-5":
//       //初判
//       router.push({
//         path: statusTopath[option.id],
//         query: { id: option.item.id },
//       });
//       // router.push(statusTopath[option.id]);
//       break;

//     default:
//       break;
//   }
//   showShare.value = false;
// };
</script>

<style lang="scss" scoped>
:deep(.van-share-sheet__options) {
  display: flex;
  justify-content: center;
}
:deep(.van-tag--mark) {
  border-radius: 10px 0px 10px 0px;
}
:deep(.van-tabs__nav) {
  width: calc(100% - 30px) !important;
}
.lists {
  padding: 0 10px;
  box-sizing: border-box;
  overflow-y: scroll;
  .item {
    width: 100%;
    position: relative;
    border-radius: 10px;
    padding: 20px 2px 2px 10px;
    background-color: white;
    box-sizing: border-box;
    margin-top: 14px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    .cell {
      display: flex;
      align-items: center;
      font-size: 13px;
      box-sizing: border-box;
      padding: 10px 12px;

      .title {
        width: 60px;
        font-size: 13px;
        flex-shrink: 0;
        margin-right: 14px;
        font-weight: 600;
      }
    }

    .tag {
      width: 100%;
      position: absolute;
      top: 0;
      right: 0px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .btn {
      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
      padding-bottom: 10px;
      box-sizing: border-box;
    }
  }
}
</style>
